﻿@using X.PagedList.Web.Common
@using X.PagedList.Mvc.Core
@using StarBlog.Web.Utils
@using Microsoft.AspNetCore.Mvc.TagHelpers
@model StarBlog.Web.ViewModels.Blog.BlogListViewModel
@{
    ViewData["Title"] = "博客列表";
}

@await Html.PartialAsync("Widgets/BackToTop", new BackToTopViewModel {IsShowText = false})

<div class="container px-4 py-3">
    <h2 class="d-flex w-100 justify-content-between pb-2 mb-3 border-bottom">
        <div>Blog / @Model.CurrentCategory.Name</div>
        <div>@Model.Posts.TotalItemCount.ToString() Posts</div>
    </h2>

    <div class="row">
        <div class="col-lg-3 mb-3" id="categories"></div>
        <div class="col-lg-9">
            @if (Model.Posts.Count == 0) {
                <partial name="Widgets/NoPostCard"/>
            }

            @foreach (var post in Model.Posts) {
                <partial name="Widgets/PostCard" model="post"/>
            }
        </div>
    </div>

    <nav aria-label="Page navigation example">
        @Html.PagedListPager(Model.Posts, page => Url.Action(
            RazorHelper.GetCurrentActionName(ViewContext), new {page, categoryId = Model.CurrentCategoryId}),
            new PagedListRenderOptions {
                LiElementClasses = new[] {"page-item"},
                PageClasses = new[] {"page-link"},
                UlElementClasses = new[] {"pagination justify-content-center"}
            })
    </nav>
</div>

@section bottom {
    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
    </environment>
    <environment exclude="Development">
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
    </environment>
    <script src="~/lib/bootstrap5-treeview/dist/bootstrap-treeview.min.js"></script>
    <script src="~/js/blog-list.js"></script>
    <script>
        const categories = '@Html.Raw(Model.CategoryNodesJson)'
        initTreeView(categories);
    </script>
}